<template>
  <view class="card-bag-container">
    <!-- 导航栏 -->
    <nav-bar title="我的卡包"></nav-bar>

    <!-- 空状态 -->
    <view v-if="loading" class="empty">加载中...</view>
    <view v-else-if="memberCards.length === 0" class="empty">暂无会员卡</view>

    <!-- 会员卡列表 -->
    <scroll-view v-else class="card-scroll" scroll-y>
      <view class="card-item" v-for="card in memberCards" :key="card.id">
        <image class="card-img" :src="card.memberCard.imgUrl" mode="aspectFill" />
        <view class="card-info">
          <view class="card-name">{{ card.memberCard.cardName }}</view>
          <view class="card-detail" v-if="card.memberCard.cardType === 2">剩余次数：{{ card.remainingTimes }}</view>
          <view class="card-detail" v-if="card.memberCard.cardType === 1">余额：¥{{ card.balance }}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
  components: { NavBar },
  data() {
    return {
      memberCards: [],
      loading: true
    }
  },
  onLoad() {
    this.fetchMemberCards()
  },
  methods: {
    fetchMemberCards() {
      const userInfoStr = uni.getStorageSync('userInfo')
      uni.request({
        url: `${uni.$config.baseUrl}/usercard/usercard/listByUid`,
        method: 'GET',
        data: { memberId:userInfoStr.memberId },
        success: res => {
          this.memberCards = (res.data && res.data.code === 200) ? res.data.rows : []
        },
        fail: () => {},
        complete: () => { this.loading = false }
      })
    }
  }
}
</script>

<style scoped>
.card-bag-container {
  min-height: 100vh;
  background: #F8F8F8;
}
.card-scroll {
  padding: 20rpx;
}
.card-item {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}
.card-img {
  width: 140rpx;
  height: 140rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}
.card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.card-detail {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 4rpx;
}
.empty {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style> 